<template>
	<s-layout title="添加群成员" :bgStyle="{
		color:'#F6F6F6'
	}">
		<view class="search-box ss-p-y-32 ss-flex justify-center align-center" :style="{
      top: sheep.$platform.device.statusBarHeight + 44 + 'px',
    }">
			<view class="search ss-p-x-20 ss-flex align-center">
				<uni-icons type="search" size="20" color="#999999"></uni-icons>
				<input class="ss-m-l-10" type="text" placeholder="搜索" placeholder-style="color:#6F7279;" />
			</view>
		</view>
		<view class="user-list ss-flex flex-wrap align-start ss-p-l-28 ss-p-r-18" :style="{
      top: sheep.$platform.device.statusBarHeight + state.height + 44 + 'px',
    }">
			<image class="user-image" v-for="(item,index) in state.userList" :key="index"
				:src="cdn(item.last_msg.Tag_Profile_IM_Image)" mode="aspectFill"></image>
		</view>
		<view :style="{
				width:'100%',
		  height: state.height2 + state.height +'px',
		}"></view>
		<view class="list ss-m-t-20">
			<view class="item ss-flex ss-p-l-30" v-for="(item,index) in state.list" :key="index" @click="change(item)">
				<view class="left">
					<uni-icons type="checkbox-filled" size="28" color="#FF5C02" v-if="isUser(item)"></uni-icons>
					<uni-icons type="circle" size="28" color="#979797" v-else></uni-icons>
				</view>
				<view class="right ss-flex">
					<image class="right-image ss-m-r-24" :src="cdn(item.last_msg.Tag_Profile_IM_Image)"
						mode="aspectFill">
					</image>
					<view class="right-text">{{item.last_msg.Tag_Profile_IM_Nick}}</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="state.message_Request === true" status="loading" :content-text="{
	        contentdown: '上拉加载更多',
	      }" />
		<s-empty v-if="state.list.length === 0 && state.message_Request === false"
			icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无数据">
		</s-empty>
		<view style="height: 200rpx;width: 1rpx;"></view>
		<view class="bottom-box ss-safe-bottom">
			<view class="ss-p-y-30 ss-flex justify-center">
				<view class="btn" @click="submit">完成</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {
		cdn,
		udid
	} from '@/im/config/index.js'
	import $store from '@/im/store/im';
	import imApi from '@/im/api/index.js'

	const iMMyInfo = computed(() => $store().userInfo);
	const groupInfo = computed(() => $store().groupInfo);

	const state = reactive({
		list: [],
		message_Request: true,
		userList: [],
		height: uni.upx2px(136),
		height2: uni.upx2px(204)
	})

	onLoad(() => {
		getData()
	})

	const submit = async () => {
		if (state.userList.length < 1) {
			return uni.showToast({
				title: '请选择要邀请的好友',
				icon: 'none',
				duration: 1500
			})
		}
		let ids = state.userList.map(item => {
			return item.account
		})
		const {
			code
		} = await imApi.addMember({
			type: udid === 'hotel' ? 'hl' : udid,
			group_id: groupInfo.value.groupProfile.groupID,
			im_id_arr: ids,
			im_id: iMMyInfo.value.userID
		})

		if (code === 0) {
			uni.showToast({
				title: '邀请成功',
				icon: 'none',
				duration: 1500,
				success() {
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			})
		}
	}

	const isUser = (item) => {
		const index = state.userList.findIndex(e => {
			return e.account === item.account
		})
		return index === -1 ? false : true
	}

	const change = (item) => {
		const index = state.userList.findIndex(e => {
			return e.account === item.account
		})
		if (index === -1) {
			state.userList.push(item)
		} else {
			state.userList.splice(index, 1)
		}
	}

	const getData = async () => {
		const {
			code,
			data
		} = await imApi.myFriendList({
			type: udid === 'hotel' ? 'hl' : udid,
			group_id: groupInfo.value.groupProfile.groupID,
			im_id: iMMyInfo.value.userID
		})

		if (code === 0) {
			state.message_Request = false
			state.list = data
		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.search-box {
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;

		.search {
			width: 704rpx;
			height: 72rpx;
			background: #F1F1F1;
			border-radius: 8rpx;

			input {
				flex: 1;
				height: 72rpx;
				font-weight: 350;
				font-size: 28rpx;
				line-height: 72rpx;
			}
		}
	}

	.user-list {
		width: 100%;
		height: 204rpx;
		background-color: #fff;
		overflow-y: scroll;
		position: fixed;
		top: 136rpx;
		left: 0;
		z-index: 999;

		.user-image {
			width: 76rpx;
			height: 76rpx;
			border-radius: 6rpx;
			margin-right: 10rpx;
			margin-bottom: 16rpx;
		}
	}

	.list {
		background-color: #fff;

		.item {
			width: 100%;
			height: 116rpx;

			.left {
				margin-right: 28rpx;

				.not {
					width: 48rpx;
					height: 48rpx;
					border: 2rpx solid #979797;
					border-radius: 50%;
				}
			}

			.right {
				flex: 1;
				height: 116rpx;
				border-bottom: 1rpx solid #F1F1F1;

				.right-image {
					width: 76rpx;
					height: 76rpx;
					border-radius: 6rpx;
				}

				.right-name {
					font-weight: 350;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}


	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		background-color: #fff;

		.btn {
			width: 710rpx;
			height: 84rpx;
			background: #FF5C02;
			border-radius: 40rpx;
			font-weight: 350;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
		}
	}
</style>